<script setup>
import CommentItem from '@/components/common/comment/CommentItem.vue'

defineProps({
  authorId: {
    type: Number,
    default: 1,
  },
})

const list = ref([])
const tabs = [
  { id: 0, label: '最新' },
  { id: 1, label: '最热' },
]
const activeTab = ref(-1)

function toggleTag(i) {
  activeTab.value = i
  switch (activeTab.value) {
    case 0:
      list.value = [
        {
          id: 0,
          from: {
            id: 1,
            nickName: '异常君',
            avatar:
              'https://p9-passport.byteacctimg.com/img/user-avatar/a1d4a2ba5ad56ddda511fe655a65cc37~90x90.awebp',
            job: '后端研发',
            fansCount: 10,
            attentionCount: 20,
          },
          content: '今年9月就会出下一个java25的lts版本。此篇文章会有更新吗',
          type: 1, // 一级评论 二级评论
          date: '1月前',
          likeCount: 0,
          isLick: false,
          commentCount: 0,
          picList: [
            'https://p26-juejin-sign.byteimg.com/tos-cn-i-k3u1fbpfcp/5f67bd9b5eb34b51be175793051cf12b~tplv-k3u1fbpfcp-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rKJ6buY546L6LSw:q75.awebp?rk3s=f64ab15b&x-expires=1745982520&x-signature=CyR6db2N9odtFueg70TGqMk56%2FE%3D',
            'https://p3-juejin-sign.byteimg.com/tos-cn-i-k3u1fbpfcp/c918a1b3699e4f6ea62e76fcef4db6d8~tplv-k3u1fbpfcp-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5byC5bi45ZCb:q75.awebp?rk3s=f64ab15b&x-expires=1745984372&x-signature=piqOOJRQS%2B5i5Y9i3z6OXlAMfKA%3D',
          ],
        },
        {
          id: 2,
          from: {
            nickName: '自动摸鱼机器',
            avatar:
              'https://p9-passport.byteacctimg.com/img/user-avatar/a1d4a2ba5ad56ddda511fe655a65cc37~90x90.awebp',
            job: '摸鱼全能王',
            fansCount: 10,
            attentionCount: 20,
          },
          content:
            '建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。反手被diao建议：生产环境优先选择LTS版本（如Java 17/21），预览特性需评估稳定性后使用。反手被diao建议：生产环境优先选择LTS版本（如Java 17/2预览特性需评估稳定性后使用。反手被diao建议：生产环境优先选择LTS版本（如Java 17/21），预览特性需评估稳定性后使用。反手被diao建议：生产环境优先选择LTS版本（如Java 17/21），预览特性需评估稳定性后使用。反手被diao建议：生产环境优先选择LTS版本（如Java 17/21），预览特性需评估稳定性后使1），预览特性需评估稳定性后使用。反手被diao建议：生产环境优先选择LTS版本（如Java 17/21），预览特性需评估稳定性后使，预览特性需评估稳定性后使用。反手被diao建议：生产环境优先选择LTS版本（如Java 17/21），预览特性需评估稳定性后使用。反手被diao建议：生产环境优先选择LTS版本（如Java 17/21），预览特性需评估稳定性后使用。反手被diao建议：生产环境优先选择LTS版本（如Java 17/21），预览特性需评估稳定性后使用。反手被diao ',
          type: 1,
          date: '1月前',
          likeCount: 1,
          isLick: true,
          allChildrenCount: 4,
          children: [
            {
              id: 3,
              from: {
                id: 1,
                nickName: '异常君',
                avatar:
                  'https://p9-passport.byteacctimg.com/img/user-avatar/a1d4a2ba5ad56ddda511fe655a65cc37~90x90.awebp',
                job: '后端研发',
                fansCount: 10,
                attentionCount: 20,
              },
              content:
                '建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。',
              type: 2,
              date: '1月前',
              likeCount: 1,
              isLick: true,
              commentCount: 2,
            },
            {
              id: 4,
              picList: [
                'https://p26-juejin-sign.byteimg.com/tos-cn-i-k3u1fbpfcp/5f67bd9b5eb34b51be175793051cf12b~tplv-k3u1fbpfcp-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rKJ6buY546L6LSw:q75.awebp?rk3s=f64ab15b&x-expires=1745982520&x-signature=CyR6db2N9odtFueg70TGqMk56%2FE%3D',
                'https://p3-juejin-sign.byteimg.com/tos-cn-i-k3u1fbpfcp/c918a1b3699e4f6ea62e76fcef4db6d8~tplv-k3u1fbpfcp-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5byC5bi45ZCb:q75.awebp?rk3s=f64ab15b&x-expires=1745984372&x-signature=piqOOJRQS%2B5i5Y9i3z6OXlAMfKA%3D',
              ],
              from: {
                id: 2,
                nickName: '咖啡猫',
                avatar:
                  'https://p9-passport.byteacctimg.com/img/user-avatar/a1d4a2ba5ad56ddda511fe655a65cc37~90x90.awebp',
                job: '后端研发',
                fansCount: 10,
                attentionCount: 20,
              },
              reply: {
                id: 1,
                nickName: '异常君',
                avatar:
                  'https://p9-passport.byteacctimg.com/img/user-avatar/a1d4a2ba5ad56ddda511fe655a65cc37~90x90.awebp',
                job: '后端研发',
                fansCount: 10,
                attentionCount: 20,
              },
              content:
                '建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。建议：生产环境优先选择LTS版本（如Java 17/21）预览特性需评估稳定性后使用。',
              type: 2,
              date: '1月前',
              likeCount: 0,
              isLick: false,
              commentCount: 2,
            },
          ],
          commentCount: 2,
        },
      ]
      break
    case 1:
      list.value = []
      break
  }
}

toggleTag(0)

function updateItem(index, newItem) {
  list.value[index] = newItem // 直接更新数组项
}
</script>

<template>
  <!--  容器 -->
  <div class="min-h-300 p-8">
    <!--    tab -->
    <div class="mb-20 op-text">
      <template v-for="tab in tabs" :key="tab.id">
        <span
          class="cursor-pointer line-height-100% us"
          :class="{ 'color-primary': activeTab === tab.id }"
          @click="toggleTag(tab.id)"
        >
          {{ tab.label }}
        </span>
        <el-divider v-if="tab.id < tabs.length - 1" direction="vertical" />
      </template>
    </div>
    <!--    评论 1级 -->
    <div class="flex-col gap-10">
      <!--      每条评论 -->
      <div v-for="(item, index) in list" :key="index">
        <CommentItem
          :item="item"
          @update-item="(newItem) => updateItem(index, newItem)"
        />
      </div>
      <el-empty
        v-if="list.length === 0"
        description="这里什么也没有"
        class="us"
      />
    </div>
  </div>
</template>

<style scoped></style>
